<%@page contentType="text/html; UTF-8" pageEncoding="utf-8" isELIgnored="false" %>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>用户注册</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"/>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>


<div class="container-fluid">
    <%--用户注册--%>
    <div class="row">
        <div class="col-sm-6 col-sm-offset-3">
            <h1 class="text-center">用户注册</h1>
        </div>
    </div>
    <%--    完成表单--%>
    <div class="row">
        <div class="col-sm-6 col-sm-offset-3">
            <form id="regForm">
                <div class="form-group">
                    <label for="name">用户名</label>
                    <input type="text" class="form-control" name="name" id="name" placeholder="用户名">
                </div>
                <div class="form-group">
                    <label for="password">密码</label>
                    <input type="password" class="form-control" name="password" id="password" placeholder="密码">
                </div>
                <div class="form-group">
                    <label for="role">角色选择</label>
                    <select name="role" class="form-control" id="role">
                        <option value="admin">管理员</option>
                        <option value="student">学生</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="checkCode">验证码</label>
                    <div>
                        <input type="text" name="code" style="height: 50px;float: left; width: 74%" class="form-control"
                               id="checkCode" placeholder="验证码">
                        <img style="float: right;width: 25%; height: 50px" id="image"
                             src="${pageContext.request.contextPath}/user/getImage"/>
                    </div>

                </div>

                <button type="button" id="regBtn" class="btn btn-danger"
                        style="margin-top: 10px; width: 45%; margin-left: 10px">立即注册
                </button>
                <button type="submit" class="btn btn-info" style="margin-top: 10px; width: 45%; margin-left: 30px;">
                    返回登陆
                </button>
            </form>
        </div>
    </div>
</div>

</body>
<script>
    $(function () {
        // 注册
        $("#regBtn").click(function () {
            $.post("${pageContext.request.contextPath}/user/register", $("#regForm").serialize(), function (res) {
                console.log(res);
                if (res.status){
                    alert(res.msg+",点击跳转至登录页面");
                    location.href = "${pageContext.request.contextPath}/back/login.jsp";
                }else{
                    alert(res.msg);
                }
            });
        });


        // 更换验证码
        $("#image").click(function () {
            $(this).attr("src", "${pageContext.request.contextPath}/user/getImage?id=" + Math.random());
        })

    })
</script>


</html>